<div class="filters-colorize-hidden">
	<div class="filters-colorize-gradient" style="margin: 0px 0px 16px 0px; width: calc(100% - 2px);">
		<div></div>
		<span style="filter: {{readingFiltersCss}}"></span>
	</div>
</div>

<div style="padding: 0px;" class="simple-slider gamepad-item" data-margin="60,25,13,24" data-gamepad-left="events.rangeMoveStep(this, -1)" data-gamepad-right="events.rangeMoveStep(this, 1)">
	<div class="simple-slider-text">{{language.reading.pages.colors}}<div><span>16</span></div></div>
	<div class="range">
		<div class="range-position">
			<span class="range-line" style="width: 100%"></span>
			<span class="range-steps"></span>
			<div>
				<div class="range-point" position="100" style="left: 100%;"><div class="elevation-1"></div></div>
			</div>
		</div>
		<input class="precise-range" data-precision="1" type="range" min="3" max="256" value="16" list="colorslist" name="filtersNumColors" onrange="reading.filters.fromImageColors(\{{value}}, \{{toEnd}})">
	</div>
</div>

<datalist id="colorslist">
	<option value="3">
	<option value="4">
	<option value="5">
	<option value="6">
	<option value="7">
	<option value="8">
	<option value="9">
	<option value="10">
	<option value="11">
	<option value="12">
	<option value="13">
	<option value="14">
	<option value="15">
	<option value="16">
	<option value="20">
	<option value="24">
	<option value="28">
	<option value="32">
	<option value="40">
	<option value="48">
	<option value="56">
	<option value="64">
	<option value="80">
	<option value="96">
	<option value="112">
	<option value="128">
	<option value="160">
	<option value="192">
	<option value="224">
	<option value="256">
</datalist>